import React from 'react';
import { useEffect, useState } from 'react';
import { getProlabel, getProTradeList} from '@/services/index';
import {getStudentTable} from '@/services/modules/student/studentPro'; 
import { RootObject, RootObject2, RootObject3} from '@/utils';
import {StudentTableList} from '@/utils/proXm';
import { Button, Input, Breadcrumb,Pagination} from 'antd'
import {  SearchOutlined,ReadOutlined,StarOutlined } from '@ant-design/icons';
import { Link,IRouteComponentProps } from 'umi';
import {observer} from 'mobx-react-lite';
import useStore from '@/context/useStore';

import './proManagement.less';


const types = ['全部', '生产实训', '教学实训', '专业群实训'];
const projects = [{name:'综合',type:'project.stucount'},{name:'最新',type:'project.publishtime'},{name:'最热',type:'project.stucount'}];

const ProManagement: React.FC<IRouteComponentProps>= ({history}) => {

    let [MajorList, SetMajorList] = useState<RootObject[]>([]);  // 专业
    let [TradeList, SetTradeList] = useState<RootObject2[]>([]); // 行业
    let [curstatus, setCurstatus] = useState(0);
    let [curtypes, setCurtypes] = useState(0);
    let [Marjorvalue, setMarjorvalue] = useState('');
    let [Tradevalue, setTradevalue] = useState('');
    let [isMyInfo, setMyInfo] = useState(false);     // 选择框
    let [title, setTitle] = useState('');      // 搜索框
    let [searchTitle, setSearchTitle] = useState('');
    let [delId,setDelId] = useState('');
    let [projectCid,setprojectCid] = useState(0);
    let [listTables,setListTables] = useState<StudentTableList[]>([]);      // 分页后的数据显示
    let {proXm} = useStore()


    // 发起请求
    useEffect(() => {
        // 获取专业
        getProlabel().then(res => {
            // console.log('res...',res)
            if (res.code === 200) {
                SetMajorList(res.data);
            }
        });
        // 获取行业
        getProTradeList().then(res => {
            // console.log('...trade',res)
            if (res.code === 200) {
                SetTradeList(res.data);
            }
        });
        let params = { isAsc: 'desc', orderByColumn:'project.stucount',pageNum: 1, pageSize: 50,proType:'',specialtyTag:'',industryTag:'',proName:'' }
        proXm.getStudentTable(params);
        setListTables(proXm.studentTables.slice(0,12))

    }, [])

    // 发生改变从新请求
    useEffect(() => {
        // let params = { isAsc: 'desc', pageNum: 1, pageSize: 10, sxtype: curtypes, status: curstatus, proName: searchTitle, newProjectList: 0, specialtyTag: Marjorvalue, industryTag: Tradevalue }
        let params = { isAsc: 'desc', orderByColumn:projects[projectCid].type,pageNum: 1, pageSize: 50,proType:'',specialtyTag:'',industryTag:'',proName:searchTitle }
        proXm.getStudentTable(params);
        setListTables(proXm.studentTables.slice(0,12))
        
    }, [curstatus, curtypes, Marjorvalue, Tradevalue, searchTitle,projectCid])
    
    // 改变分页
    function onChangePage(pageNumber:any) {
        console.log('Page: ', pageNumber);
        setListTables(proXm.studentTables.slice((pageNumber-1)*12,12*pageNumber))
    }

    return <div className='proManagement'>
        <div className="header">
            <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
                <Breadcrumb.Item>项目</Breadcrumb.Item>
                <Breadcrumb.Item>项目管理</Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <div className="main">
            <section className='main_head'>
                <section className='main_head_types'>
                    <span>实训类型：</span>
                    {
                        types.map((item, index) => {
                            return <span key={index} className={curtypes === index ? 'active' : ''} onClick={() => { setCurtypes(index) }}>
                                {item}
                            </span>
                        })
                    }
                </section>
                <section className='main_head_major'>
                    <span>专业：</span>
                    <span className={Marjorvalue == '' ? 'active' : ''} onClick={() => { setMarjorvalue('') }}>全部</span>
                    {
                        MajorList.map((item, index) => {
                            return <span key={index} className={Marjorvalue == item.value ? 'active' : ''} onClick={() => { setMarjorvalue(item.value); console.log('Marjorvalue', Marjorvalue) }}>
                                {item.label}
                            </span>
                        })
                    }
                </section>
                <section className='main_head_trade'>
                    <span>行业：</span>
                    <span className={Tradevalue == '' ? 'active' : ''} onClick={() => { setTradevalue('') }}>全部</span>
                    {
                        TradeList.map((item, index) => {
                            return <span key={index} className={Tradevalue == item.value ? 'active' : ''} onClick={() => { setTradevalue(item.value) }}>
                                {item.label}
                            </span>
                        })
                    }
                </section>
            </section>
        </div>
        <section className='footer'>
            <div className="search">
                <div className='projects'>
                    {
                        projects.map((item,index)=>{
                            return <span key={index} onClick={()=>{setprojectCid(index)}} className={projectCid===index ? 'procid' : ''}>{item.name}</span>
                        })
                    }
                </div>
                <div className='search_so'>
                    <Input placeholder="搜索项目" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                        if (e.keyCode === 13) {
                            setSearchTitle(title)
                        }
                    }} />
                    
                </div>
            </div>
            <div className="tables">
                {
                    listTables && listTables.map((item,index)=>{
                        return <dl key={index} onClick={()=>{
                            history.push({
                                pathname:'/student/proManagement/addProject',
                                query:{
                                    str:item.pictureUrl
                                }
                            })
                            console.log('123',history)
                        }}>
                            <dt>
                                <img src={`http://111.203.59.61:8060${item.pictureUrl}`} />
                            </dt>
                            <dd>
                                <div className='project_title'>
                                    <p style={{fontSize:"18px",height:'18px',lineHeight:'50px'}}>{item.name}</p>
                                    <div className='description'>
                                        {item.description}
                                    </div>
                                </div>
                                <div className='project_bottom'>
                                    <p>
                                        <ReadOutlined />
                                        <span>{item.stuCount}</span>
                                        <StarOutlined />
                                        <span>{item.favorCount}</span>
                                    </p>
                                    <p>{types[Number(item.sxType)]}</p>
                                </div>
                            </dd>
                        </dl>
                    })
                }
            </div>
            <div className="footer_page">
                <Pagination showQuickJumper defaultCurrent={2} total={proXm.studentTables && proXm.studentTables.length} onChange={onChangePage} />
            </div>
        </section>
    </div>
}

export default observer(ProManagement);

